<template>
  <div>
    <div class="input_part">
      <h4>填写基本信息</h4>
      <br />
      <input class="input_line" type="text" placeholder="姓名" v-model="inputData.name" />
      <input
        class="input_line"
        type="number"
        min="1990000"
        max="2020000"
        placeholder="工号"
        v-model="inputData.id"
      />
      <input
        class="input_line"
        type="number"
        min="20"
        max="60"
        placeholder="年龄"
        v-model="inputData.age"
      />
      <select class="input_line" v-model="inputData.sex">
        <option>男</option>
        <option>女</option>
      </select>
      <select class="input_line" v-model="inputData.type">
        <option>塔台</option>
        <option>终端</option>
        <option>区管</option>
        <option>流量</option>
      </select>

      <select class="input_line" v-model="inputData.rank">
        <option>见习管制员</option>
        <option>放单管制员</option>
        <option>管制教员</option>
        <option>带班主任</option>
        <option>助理</option>
        <option>科室领导</option>
      </select>
      <div>实际参与管制工作的开始时间:</div>
      <input class="input_line" type="date" placeholder="实际参与管制工作的开始时间" v-model="inputData.time" />
      <br />
      <p>
        * 仅保留您的
        <b>首次</b>&nbsp;测试结果，请认真作答。
      </p>
      <br />
      <button
        type="button"
        class="input_block btn btn-primary"
        v-show="isSubmitted"
        @click="submitData()"
      >下一步</button>
    </div>
    <br />
    <p style="color:lightgrey;font-size:0.8em">成都终端管制室 创新工作室 2021</p>
    <br />
  </div>
</template>

<script>
export default {
  name: "InputView",
  props: [],
  data() {
    return {
      inputData: {
        name: "",
        age: "",
        sex: "男",
        id: "",
        type: "塔台",
        rank: "放单管制员",
        time: "2019-12-12"
      }
      //isSubmitted: false
    };
  },
  computed: {
    devMode() {
      return this.$store.state.devMode;
    },
    isSubmitted() {
      if (
        this.inputData.name != "" &&
        this.inputData.age != "" &&
        this.inputData.id != "" &&
        this.inputData.time != ""
      ) {
        return true;
      }
      return false;
    }
  },
  methods: {
    submitData() {
      this.commitUserInfo();
      this.goNext();
    },
    goNext() {
      this.$store.commit("routerNext");
      this.$router.push(this.$store.state.routerData.nextView);
      if (this.devMode) {
        window.console.log(this.$store.state.routerData.nextView);
      }
      //this.$router.push("holland");
    },
    commitUserInfo() {
      this.$store.commit("setUserInfo", this.inputData);
      if (this.devMode) {
        window.console.log(JSON.stringify(this.$store.state.userInfo));
      }
    }
  },
  mounted() {
    if (this.devMode) {
      this.inputData = {
        name: "hehe",
        age: "18",
        sex: "男",
        id: "2020001",
        type: "塔台",
        rank: "放单管制员",
        time: "2012-10-28"
      };
    }
  }
};
</script>

<style scoped>
.input_part {
  padding: 0 1em;
}

.input_line {
  width: 80%;
  border: 1px solid lightgray;
  border-radius: 5px;
  margin: 0.5em 0;
  padding: 0.25em 1em;
}

.input_block {
  width: 40%;
  border: 1px solid lightgray;
  border-radius: 5px;
  margin: 0.5em 0;
  padding: 0.25em 1em;
}
</style>